<template lang="html">
  <div class="login">
    <div class="login-con">
      <img class="login-title" src="../../assets/img/login-title.png" />
      <Card icon="log-in">
        <div class="form-con">
          <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="submit">
            <div class ="tab" style="margin-bottom:30px;">
              <span class="one">登录</span>
            </div>

            <FormItem prop="phone" class="martop">
              <Input v-model="form.phone" placeholder="手机号码"></Input>
            </FormItem>
            <FormItem prop="password">
              <Input type="password" v-model="form.password" placeholder="请输入密码"></Input>
            </FormItem>
            <FormItem>
              <Button @click="submit" type="primary" style="width: 96px;height: 40px;">立即登录</Button>
              <a herf="#" class="forGetPassword">忘记密码</a>
            </FormItem>
          </Form>
        </div>
      </Card>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  data () {
    return {
      form: {
        phone: '',
        password: ''
      },
    }
  },
  computed: {
    rules () {
      return {
        phone: { required: true, message: '账号不能为空', trigger: 'blur' },
        password: { required: true, message: '密码不能为空', trigger: 'blur' },
      }
    }
  },
  methods: {
    // ...mapActions([
    //   'signIn',
    // ]),
    submit () {
      this.$refs.loginForm.validate((valid) => {
        console.log(valid);
        if (valid) {
          // this.$store.setToken('dd')
          // this.signIn({
          //   phone: 'admin',
          //   userId: 1,
          //   access: 2,
          //   token: 341,
          // })
          this.$router.push({
            name: 'home'
          })
        }
      })
    }
  }
}
</script>

<style lang="css">
.ivu-input{
  width:516px;
  height:46px;
}
.login {
  width: 100%;
  height: 84vh;
  background-image: url('../../assets/img/login-bg.png');
  background-size: center;
  background-position: center;
  position: relative;
  display: flex;
}
.login-con {
  width: 550px;
  margin: auto;
}
.login .one {
  font-size: 18px;
  font-family: MicrosoftYaHei;
  color: #515A6E;
  cursor: pointer;
  margin-bottom: 20px;
  display: inline-block;
  height: 40px;
}
.one:hover {
  border-bottom: 2px solid #2b85e4;
}
.one:visited {
  color: #17233D;
}
.hide {
  display: none;
}
.tab {
  height: 40px;
  border-bottom: 2px solid #dcdee2;
}
.martop {
  margin-top: 10px 0;
}
.login-title {
  width: 98%;
  padding-bottom: 35px;
  padding-left: 30px;
}
.writ {
  position: absolute;
  right: 40px;
  top: 48%;
  color: #5899e8;
  border-left: 2px solid #dcdee2;
  padding-left: 34px;
  cursor: pointer;
}
.photo {
  position: absolute;
  right: 30px;
  top: 64%;
  cursor: pointer;
}
.forGetPassword {
  color: #ED4014;
  float: right;
}
</style>
